// import js from '@eslint/js';
import vue from 'eslint-plugin-vue';
import prettier from 'eslint-plugin-prettier';
import configPrettier from 'eslint-config-prettier';

export default [

  {
    // 忽略检查的文件和目录
    // 这些文件将不会被ESLint检查
    ignores: [
      'dist/**',      // 构建输出目录
      'node_modules/**', // 依赖包目录
      '*.log',        // 日志文件
      '.git/**'       // Git版本控制文件
    ],
  },
  {
    // 匹配的文件类型
    files: ['**/*.{js,vue,jsx}'],

    // 语言选项配置
    languageOptions: {
      // ECMAScript版本
      // 可选值: 3, 5, 2015, 2016, 2017, 2018, 2019, 2020, 2021, 2022, "latest"
      ecmaVersion: 2022,

      // 模块类型
      // 可选值: "script" (脚本), "module" (ES模块)
      sourceType: 'module',

      // 全局变量定义
      // 可选值: "readonly" (只读), "writable" (可写), "off" (禁用)
      globals: {
        console: 'readonly',      // 控制台输出
        process: 'readonly',      // Node.js进程对象
        window: 'readonly',       // 浏览器窗口对象
        document: 'readonly',     // DOM文档对象
        localStorage: 'readonly',   // 本地存储
        sessionStorage: 'readonly', // 会话存储
        location: 'readonly',     // 浏览器地址栏
        alert: 'readonly',        // 警告对话框
        confirm: 'readonly',      // 确认对话框
        prompt: 'readonly',       // 输入对话框
        setTimeout: 'readonly',   // 延时执行
        clearTimeout: 'readonly', // 清除延时
        setInterval: 'readonly',  // 定时执行
        clearInterval: 'readonly', // 清除定时
        fetch: 'readonly',        // 网络请求
        navigator: 'readonly',    // 浏览器信息
      },
    },

    // 插件配置
    plugins: {
      vue,      // Vue.js代码规范插件
      prettier, // Prettier格式化插件
    },

    // ESLint规则配置（已优化：移除了Prettier已覆盖的格式规则和Vue 3内置验证规则）
    rules: {
      // === ESLint 核心规则 ===
      // 代码质量和最佳实践规则

      // 禁止未使用的变量 - 保持代码整洁，避免无用变量
      'no-unused-vars': [
        'error', // 级别: "error" (错误), "warn" (警告), "off" (关闭)
        {
          vars: 'all',                // 检查所有变量
          args: 'after-used',         // 只检查使用后的参数
          ignoreRestSiblings: true,   // 忽略剩余属性
          varsIgnorePattern: '^_',    // 允许以_开头的变量（如未使用参数）
          argsIgnorePattern: '^_',    // 允许以_开头的参数
        },
      ],

      'no-empty': [
        'error',
        {
          allowEmptyCatch: true, // 允许空的catch块
          allowEmptyFunctions: true, // 允许空函数
        },
      ],

      // 允许catch参数未使用 - 有时只需要捕获错误但不需要处理
      'no-unused-vars': [
        'error',
        {
          vars: 'all',
          args: 'after-used',
          ignoreRestSiblings: true,
          varsIgnorePattern: '^_',
          argsIgnorePattern: '^_', // 允许以_开头的参数
          caughtErrors: 'none', // 允许catch参数未使用
        },
      ],

      // 禁止console语句 - 生产环境不应有调试输出
      // 级别: "error" (错误), "warn" (警告), "off" (关闭)
      'no-console': 'warn',

      // 禁止debugger语句 - 生产环境不应有调试断点
      'no-debugger': 'warn',

      // 禁止alert语句 - 使用更友好的UI提示方式
      'no-alert': 'warn',

      // 要求使用const声明不会被重新赋值的变量 - 提高代码可读性
      'prefer-const': 'error',

      // 禁止使用var - 使用let或const替代
      'no-var': 'error',

      // 要求使用箭头函数作为回调 - 简化语法
      'prefer-arrow-callback': 'error',

      // 禁止重复导入 - 保持import语句整洁
      'no-duplicate-imports': 'error',

      // === Vue 规则 ===
      // Vue.js 特定代码规范

      // 禁止未使用的Vue变量 - 保持模板代码整洁
      'vue/no-unused-vars': 'error',

      // 禁止未使用的组件 - 保持组件导入整洁
      'vue/no-unused-components': 'error',

      // 不强制要求prop默认值 - 根据实际需求决定
      'vue/require-default-prop': 'off',

      // 不强制要求prop类型声明 - 根据实际需求决定
      'vue/require-prop-types': 'off',

      // 限制每行最大属性数量 - 提高可读性
      'vue/max-attributes-per-line': [
        'error',
        {
          singleline: 3,  // 单行最多3个属性
          multiline: 1,   // 多行每行最多1个属性
        },
      ],

      // HTML标签自闭合规则 - 统一格式
      'vue/html-self-closing': [
        'error',
        {
          html: {
            void: 'always',     // 空元素（如<br>）必须自闭合
            normal: 'never',    // 普通元素不使用自闭合
            component: 'always',  // 组件必须自闭合
          },
          svg: 'always',        // SVG元素必须自闭合
          math: 'always',       // MathML元素必须自闭合
        },
      ],

      // prop命名规范 - 强制使用驼峰命名
      // 可选值: "camelCase" (驼峰), "snake_case" (蛇形), "kebab-case" (短横线)
      'vue/prop-name-casing': ['error', 'camelCase'],

      // 模板中组件名规范 - 强制使用PascalCase
      // 可选值: "PascalCase" (帕斯卡), "kebab-case" (短横线)
      'vue/component-name-in-template-casing': ['error', 'PascalCase'],

      // 组件定义名规范 - 强制使用PascalCase
      'vue/component-definition-name-casing': ['error', 'PascalCase'],

      // 禁止多个模板根元素 - Vue 3 要求单一根元素
      'vue/no-multiple-template-root': 'error',

      // 禁止在<template>上使用key - 避免错误用法
      'vue/no-template-key': 'error',

      // 禁止v-if和v-for同时使用 - 避免性能问题和逻辑错误
      'vue/no-use-v-if-with-v-for': 'error',

      // 验证v-for指令的正确使用 - 确保语法正确
      'vue/valid-v-for': 'error',

      // 验证v-if指令的正确使用 - 确保语法正确
      'vue/valid-v-if': 'error',

      // 验证v-show指令的正确使用 - 确保语法正确
      'vue/valid-v-show': 'error',

      // === Prettier 集成 ===
      // 将Prettier格式问题作为ESLint错误报告
      // 确保Prettier格式化规则被强制执行
      // 可选值: "error" (错误), "warn" (警告), "off" (关闭)
      'prettier/prettier': 'error',
    },
  },

  // Vue.js基本配置
  ...vue.configs['flat/essential'],

  // 确保单字组件名规则被禁用
  {
    files: ['**/*.vue'],
    rules: {
      // 允许多单词组件名 - 简化组件命名，不强制要求
      // 可选值: "error" (错误), "warn" (警告), "off" (关闭)
      'vue/multi-word-component-names': 'off',
    },
  },

  // Prettier配置 - 关闭与Prettier冲突的ESLint规则
  configPrettier,
];
